<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>小米官网</title>
    <link rel="stylesheet" href="reset.css" />
    <link rel="stylesheet" href="css.css" />
  </head>
  <body>
    <!-- 这是头部 -->
    <header>
      <div class="thead">
        <section class="hs h1">
          <nav>
            <ul>
              <li><a href="">小米官网</a> <span>|</span></li>
              <li><a href="">小米商城</a> <span>|</span></li>
              <li><a href="">小米澎湃OS</a> <span>|</span></li>
              <li><a href="">IoT</a> <span>|</span></li>
              <li><a href="">云服务</a> <span>|</span></li>
              <li><a href="">天星数科</a> <span>|</span></li>
              <li><a href="">有品</a> <span>|</span></li>
              <li><a href="">小爱开放平台</a> <span>|</span></li>
              <li><a href="">资质证照</a> <span>|</span></li>
              <li><a href="">协议规则</a> <span>|</span></li>
              <li><a href="">下载app</a> <span>|</span></li>
              <li><a href="">Select Location</a></li>
            </ul>
          </nav>
          <nav>
            <ul>
              <li><a href="">登陆</a> <span>|</span></li>
              <li><a href="">注册</a> <span>|</span></li>
              <li><a href="">信息通知</a></li>
            </ul>
            <ul class="buycar">
              <li>
                <img
                  src="../小米商城--前端布局0326/小米商城--前端布局0326/images/d7db56d1d850113f016c95e289e36efa.png"
                  alt=""
                />
              </li>
              <li>购物车</li>
              <li>(0)</li>
              <div class="card">购物车中还没有商品，赶紧选购吧</div>
            </ul>
          </nav>
        </section>
      </div>
      <div class="bhead">
        <section class="hs h2">
          <img
            src="../小米商城--前端布局0326/小米商城--前端布局0326/images/a1946d4eb707b2919480a9e3603250a.png"
            alt=""
          />
          <nav>
            <ul>
              <li><a href="">Xiaomi手机</a></li>
              <li><a href="">Redmi手机</a></li>
              <li><a href="">电视</a></li>
              <li><a href="">笔记本</a></li>
              <li><a href="">平板</a></li>
              <li><a href="">家电</a></li>
              <li><a href="">路由器</a></li>
              <li><a href="">服务中心</a></li>
              <li><a href="">社区</a></li>
            </ul>
          </nav>
          <div>
            <input type="text" placeholder="电视" />
            <a href="#">
              <img
                src="../小米商城--前端布局0326/小米商城--前端布局0326/images/search-icon.png"
                alt=""
              />
            </a>
          </div>
        </section>
      </div>
    </header>

    <!-- 这是主体 -->
    <div class="bg">
      <main>
        <div class="menu">
          <ul>
            <li><a href="">手机</a></li>
            <li><a href="">电视</a></li>
            <li><a href="">家电</a></li>
            <li><a href="">笔记本 平板</a></li>
            <li><a href="">出行 穿戴</a></li>
            <li><a href="">耳机 音响</a></li>
            <li><a href="">健康 儿童</a></li>
            <li><a href="">生活 箱包</a></li>
            <li><a href="">智能 路由器</a></li>
            <li><a href="">电源 配件</a></li>
          </ul>
          <ul>
            <li>></li>
            <li>></li>
            <li>></li>
            <li>></li>
            <li>></li>
            <li>></li>
            <li>></li>
            <li>></li>
            <li>></li>
            <li>></li>
          </ul>
        </div>
        <img
          src="../小米商城--前端布局0326/小米商城--前端布局0326/images/079f2eab16fdcb6132f7f58ffcf24b0a.webp"
          alt=""
        />
      </main>
    </div>

    <!--主体p -->
    <div class="pbg">
      <section>
        <div class="item">
          <div>
            <img
              src="../小米商城--前端布局0326/小米商城--前端布局0326/images/82abdba456e8caaea5848a0cddce03db.png"
              alt=""
            />
            <span>保障服务</span>
          </div>

          <div>
            <img
              src="../小米商城--前端布局0326/小米商城--前端布局0326/images/806f2dfb2d27978e33fe3815d3851fa3.png"
              alt=""
            />
            <span>企业团购</span>
          </div>

          <div>
            <img
              src="../小米商城--前端布局0326/小米商城--前端布局0326/images/eded6fa3b897a058163e2485532c4f10.png"
              alt=""
            />
            <span>F码通道</span>
          </div>

          <div>
            <img
              src="../小米商城--前端布局0326/小米商城--前端布局0326/images/43a3195efa6a3cc7662efed8e7abe8bf.png"
              alt=""
            />
            <span>米粉卡</span>
          </div>

          <div>
            <img
              src="../小米商城--前端布局0326/小米商城--前端布局0326/images/f4846bca6010a0deb9f85464409862af.png"
              alt=""
            />
            <span>以旧换新</span>
          </div>

          <div>
            <img
              src="../小米商城--前端布局0326/小米商城--前端布局0326/images/9a76d7636b08e0988efb4fc384ae497b.png"
              alt=""
            />
            <span>话费充值</span>
          </div>
        </div>
        <div class="item2">
          <img
            src="../小米商城--前端布局0326/小米商城--前端布局0326/images/6b67117bc92924fb2ff0e7ad2be86084.png"
            alt=""
          />
          <img
            src="../小米商城--前端布局0326/小米商城--前端布局0326/images/8dede2520f8dfff9c9b690af498cafe8.jpg"
            alt=""
          />
          <img
            src="../小米商城--前端布局0326/小米商城--前端布局0326/images/1ac77590368ff636d0b4f6a988133f55.png"
            alt=""
          />
        </div>
      </section>
    </div>
  </body>
</html>
